<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"  name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="../css/title-style.css">
<link type="text/css" href="../css/style.css" rel="stylesheet"/>

<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.event.drag.js"></script>
<script type="text/javascript" src="../js/jquery.touchSlider.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	$(".img_gallery").hover(function(){
		$("#btn_prev,#btn_next").fadeIn()
	},function(){
		$("#btn_prev,#btn_next").fadeOut()
	});
	
	$dragBln = false;
	
	$(".main_img").touchSlider({
		flexible : true,
		speed : 200,
		btn_prev : $("#btn_prev"),
		btn_next : $("#btn_next"),
		paging : $(".point a"),
		counter : function (e){
			$(".point a").removeClass("on").eq(e.current-1).addClass("on");//图片顺序点切换
			$(".img_font span").hide().eq(e.current-1).show();//图片文字切换
		}
	});
	
	$(".main_img").bind("mousedown", function() {
		$dragBln = false;
	});
	
	$(".main_img").bind("dragstart", function() {
		$dragBln = true;
	});
	
	$(".main_img a").click(function(){
		if($dragBln) {
			return false;
		}
	});
	
	timer = setInterval(function(){
		$("#btn_next").click();
	}, 5000);
	
	$(".img_gallery").hover(function(){
		clearInterval(timer);
	},function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		},5000);
	});
	
	$(".main_img").bind("touchstart",function(){
		clearInterval(timer);
	}).bind("touchend", function(){
		timer = setInterval(function(){
			$("#btn_next").click();
		}, 5000);
	});
	
});
</script>
	<title>title</title>
</head>
<body>
	<div class="content">
		<div class="head">
			<a href="http://www.baidu.com">
			<div class="backimg floatleft">
				<
			<div class="clear"></div>
			</div>	
			</a>
			<div class="textstyle1 floatleft">
				 嗨二书	
			<div class="clear"></div>	
			</div>
			<a href=http://www.baidu.com>
			<div class="backimg floatright">
				&nbsp;
			<div class="clear"></div>
			</div>

			</a>	
			</div>
			<div class="img_gallery">
				<div class="point">
					<a href="#">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">4</a>
					<a href="#">5</a>
				</div>
			<div  class="main_img">
				<ul>
					<li><span class="img_1"></span></li>
					<li><span class="img_2"></span></li>
					<li><span class="img_3"></span></li>
					<li><span class="img_4"></span></li>
					<li><span class="img_5"></span></li>
				</ul>
				<a href="javascript:;" id="btn_prev"></a>
				<a href="javascript:;" id="btn_next"></a>
			</div>
	
			</div>
			<div class="new">
					 <!--  <ul class="new-list">
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 	
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 	<li id="new-1" >
					 		<img src="img/1.jpg">
					 	</li>
					 
					 
					 </ul> -->
					</div>


	</div>

</body>

</html>